<template>
  <el-dialog v-model="props.mailVisible" :title="props.title" width="450px" center>
    <div>
      <el-row :gutter="20">
        <el-col>
          <el-input
            v-model="emailNname.name"
            type="text"
            :placeholder="$t('om.Pleaseenteryouremail')"
          />
        </el-col>
      </el-row>
      <el-row :gutter="20" class="code">
        <el-col :span="14">
          <el-input
            v-model="verificationCode"
            type="text"
            :placeholder="$t('om.Pleaseenterthecode')"
          />
        </el-col>
        <el-col :span="3">
          <el-button @click="startCountdown" :disabled="isSending || countdown > 0">
            <template v-if="countdown > 0"> {{ countdown }}s </template>
            <template v-else> {{ $t('om.GetCAPTCHA') }} </template>
          </el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="code">
        <el-col>
          <el-input
            v-model="emailNname.password"
            type="password"
            show-password
            :placeholder="$t('om.Pleaseenteranewpassword')"
          />
        </el-col>
      </el-row>
      <div class="footer">
        <el-button @click="registerAccount">{{ $t('smt.Define') }}</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { getMailRetrieveVerificationCode, resetPassword } from '../../server/api/auth';
import { ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const props = defineProps({
  mailVisible: {
    type: Boolean,
  },
  title: {
    type: String,
  },
  type: {
    type: String,
  },
});
const emit = defineEmits(['closeMailVisible']);
const emailNname = reactive({
  name: '',
  password: '',
});
const verificationCode = ref('');
const isSending = ref(false);
const countdown = ref(0);

const typeName = (form) => {
  switch (props.type) {
    case '1':
      emailNname.name = form.username;
      emailNname.password = form.password;
      break;
    case '2':
      break;
    case '3':
      break;
    default:
      break;
  }
};
defineExpose({
  typeName,
});
/**
 * 获取验证码
 */
const startCountdown = () => {
  // 模拟发送验证码的异步操作
  if (!isSending.value && countdown.value === 0) {
    isSending.value = true;
    countdown.value = 60;

    const countdownInterval = setInterval(() => {
      countdown.value--;
      if (countdown.value === 0) {
        clearInterval(countdownInterval);
        isSending.value = false;
      }
    }, 1000);
  }
  getVerificationCode();
};

/**
 * 根据不同的组件type调用不同的接口 1-注册 2-获取新旧邮箱 3-验证新旧邮箱
 */
const requestVerificationType = () => {
  switch (props.type) {
    case '1':
      getVerificationCode();
      break;
    case '2':
      break;
    case '3':
      break;
    default:
      break;
  }
};

/**
 * 获取邮箱验证码
 */
const getVerificationCode = () => {
  getMailRetrieveVerificationCode(emailNname.name).then((res) => {
    if (res.code == 200) {
      ElMessage.success(t('mall.check_email'));
    } else {
      ElMessage.error(res.msg);
    }
  });
};

/**
 * 找回密码
 */
const registerAccount = () => {
  let obj = {
    email: emailNname.name,
    newPassword: emailNname.password,
    mailVerificationCode: verificationCode.value,
  };
  resetPassword(obj).then((res) => {
    if (res.code === 200) {
      ElMessage.success(t('mall.password_retrieval_successful'));
      emit('closeMailVisible');
    } else {
      ElMessage.error(res.msg);
    }
  });
};
</script>
<style lang="scss" scoped>
.code {
  margin-top: 12px;
}
.footer {
  width: 100%;
  padding-bottom: 24px;
  padding-top: 24px;
  display: flex;
  justify-content: center;
}
</style>
